<template>
  <view class="container">
    <view class="container-inner">

      <view class="inner-top">
        <view class="user-info">
          <view class="info">
            <view class="info-left">
              <image class="avatar"
                     :src="avatarSrc"
              ></image>
            </view>
            <view class="info-right">
              <text class="nickname">{{ userInfo.nickName }}</text>
              <text class="phone">{{ userInfo.phonenumber }}</text>
            </view>
          </view>


          <view class="update">
<!--            <text>修改</text>-->
            <u-icon @click="goPage('/subpages/updateuser/updateuser')" name="arrow-right"
                    label="修改"
                    labelPos="left"
                    color="rgb(170,170,170)"
                    size="15"></u-icon>
          </view>
        </view>
        <view class="split-line"></view>
        <view class="menu">
          <view @click="goPage('/pages/myfavorite/myfavorite')" class="menu-item">
            <view class="menu-item-left">
<!--              <view class="menu-icon">-->

<!--              </view>-->
<!--              <view class="menu-text">-->
<!--                我的收藏-->
<!--              </view>-->

              <u-icon name="star"
                      label="我的收藏"
                      label-color="black"
                      labelPos="right"
                      color="rgb(170,170,170)"
                      size="30"></u-icon>
            </view>
            <view class="menu-item-right">
              <view class="menu-item-right-content">
                <u-icon  name="arrow-right"
                         color="rgb(170,170,170)"
                         size="20"></u-icon>
              </view>
            </view>
          </view>

          <view @click="goPage('/pages/privacyagreement/privacyagreement')" class="menu-item">
            <view class="menu-item-left">
<!--              <view class="menu-icon">-->

<!--              </view>-->
<!--              <view class="menu-text">-->
<!--                隐私政策-->
<!--              </view>-->

              <u-icon name="lock"
                      label="隐私政策"
                      label-color="black"
                      labelPos="right"
                      color="rgb(170,170,170)"
                      size="30"></u-icon>
            </view>
            <view class="menu-item-right">
              <view class="menu-item-right-content">
                <u-icon  name="arrow-right"
                         color="rgb(170,170,170)"
                         size="20"></u-icon>
              </view>
            </view>
          </view>

          <view class="menu-item">
            <view class="menu-item-left">
<!--              <view class="menu-icon">-->

<!--              </view>-->
<!--              <view class="menu-text">-->
<!--                客服热线-->
<!--              </view>-->

              <u-icon name="kefu-ermai"
                      label="客服热线"
                      label-color="black"
                      labelPos="right"
                      color="rgb(170,170,170)"
                      size="30"></u-icon>
            </view>
            <view class="menu-item-right">
              <view class="menu-item-right-content">
                1000000
              </view>
            </view>
          </view>

          <view class="menu-item">
            <view class="menu-item-left">
<!--              <view class="menu-icon">-->

<!--              </view>-->
<!--              <view class="menu-text">-->
<!--                当前版本-->
<!--              </view>-->

              <u-icon name="info-circle"
                      label="当前版本"
                      label-color="black"
                      labelPos="right"
                      color="rgb(170,170,170)"
                      size="30"></u-icon>
            </view>
            <view class="menu-item-right">
              <view class="menu-item-right-content">
                1.0
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="inner-bottom">
        <view v-if="isLogin" class="opr">
          <u-button @click="logout" type="primary"
                    color="rgb(240, 169, 160)"
                    :customStyle="{'padding-left': '100rpx',
                      'padding-right': '100rpx'}"
                    text="退出登录"></u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

import {mapState} from 'vuex'
import {checkLogin} from "@/config/util/common";

export default {
  data() {
    return {};
  },
  computed: {
    // ...mapState(['userInfo'])

    isLogin() {
      return checkLogin(false);
    },
    userInfo() {
      return this.$store.state.userInfo ? this.$store.state.userInfo
          : {
            avatar: "",
            nickName: "",
            phonenumber: "",
          }
    },
    avatarSrc(){
      return this.userInfo.avatar ?
          `${this.$baseFileUrl}${this.userInfo.avatar}`:
          '/static/default-avatar.png'
    }
  },
  onLoad() {

    // const isLogin = this.$store.getters.checkLogin;
    // if (!isLogin) {
    //   uni.navigateTo({
    //     url: "/pages/login/login"
    //   })
    // }

    checkLogin(true)
  },
  methods: {

    //退出登录
    logout() {

      //弹窗提示
      uni.showModal({
        title: '确认退出登录？',
        showCancel: true,
        content: '退出登录后无法查看我的收藏',
        success: (res) => {
          if (res.confirm) {
            console.log('用户点击确定');
            this.$store.dispatch("logout");
            uni.redirectTo({
              url: "/pages/login/login"
            })
          } else if (res.cancel) {
            console.log('用户点击取消');

          }
        }
      });

    },

    //去到其他页面
    goPage(path) {

      uni.navigateTo({
        url: path
      })
    }
  }

}
</script>

<style scoped lang="scss">

.container {

  background-color: $sys-color-grey-242;

  .container-inner {
    padding: unset;
    display: flex;
    flex-direction: column;
    justify-content: space-between;


    .inner-top {
      .user-info {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-top: $sys-margin-top-100;
        padding-bottom: $sys-margin-bottom-50;
        padding-left: $sys-padding-50;
        padding-right: $sys-padding-50;
        background-color: $sys-color-white;

        .info {
          display: flex;
          flex-direction: row;


          .info-left {
            .avatar {
              width: 150rpx;
              height: 150rpx;
              border-radius: 50%; /* 设置边框半径为50%，形成圆形 */
              object-fit: cover; /* 确保图片内容填充整个容器，超出的部分会被裁剪 */
            }
          }

          .info-right {
            margin-left: 30rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
          }

        }

        .update {
          display: flex;
          align-items: center;
          //color: $sys-color-grey-170;
        }
      }

      .split-line {
        height: 20rpx;
      }

      .menu {
        background-color: $sys-color-white;

        .menu-item {

          display: flex;
          justify-content: space-between;
          padding-left: $sys-padding-50;
          padding-right: $sys-padding-50;
          padding-top: $sys-padding-30;
          padding-bottom: $sys-padding-30;
          border-bottom: 1px solid $sys-color-grey-170;
          align-items: center;

          .menu-item-right{
            color: $sys-color-grey-170;
          }

        }

      }
    }

    .inner-bottom {
      display: flex;
      justify-content: center;
      margin-bottom: $sys-margin-bottom-150;

      .opr {

        padding-left: $sys-padding-50;
        padding-right: $sys-padding-50;

      }
    }
  }
}
</style>
